<!-- 新增编辑模型 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="35%"
    destroy-on-close
  >
    <div
      class="form-box"
      style="max-height: 500px; overflow: hidden; overflow-y: auto"
    >
      <el-form
        ref="operaModelRef"
        :rules="rules"
        :model="dialogForm"
        label-width="120px"
      >
        <el-form-item label="字典名称：" prop="name">
          <el-input
            v-model="dialogForm.name"
            placeholder="请输入字典名称"
            autocomplete="false"
          />
        </el-form-item>
        <el-form-item label="字典编码：" prop="code">
          <el-input
            v-model="dialogForm.code"
            placeholder="请输入字典编码"
            autocomplete="false"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialog">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
// 校验方法
const validateCode = (rule, value, callback) => {
  if (!value) {
    callback(new Error("字典编码不能为空"));
  } else if (/[a-zA-Z]$/.test(value) == false) {
    callback(new Error("字典编码只能是英文字符"));
  } else {
    // 校验通过
    callback();
  }
};

export default {
  name: "OperaDialog",
  data() {
    return {
      dialogTitle: "新增字典分类",
      dialogVisible: false,
      // 提交信息
      dialogForm: {
        name: null,
        code: null,
      },
      rules: {
        name: [
          { required: true, message: "字典名称不能为空！", trigger: "blur" },
        ],
        code: [
          {
            validator: validateCode,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 打开弹窗
    openDialog(info) {
      if (info) {
        this.dialogTitle = "编辑字典分类";
        this.dialogForm = {...info};
      } else {
        this.dialogTitle = "新增字典分类";
        this.dialogForm = {
          name: null,
          code: null,
        };
      }

      this.dialogVisible = true;
    },
    confirmDialog() {
      this.$refs.operaModelRef.validate((valid, fields) => {
        if (valid) {
          const params = {
            ...this.dialogForm,
            dataDictionaryName: this.dialogForm.name,
          };
          if (this.dialogTitle === "新增字典分类") {
            this.$axios
              .post(
                this.$api.dataConnection.dataDictionary.addDictionary,
                params
              )
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message || "操作成功");
                  this.dialogVisible = false;
                  this.$emit("reload");
                } else {
                  this.$message.warning(res.data.message);
                }
              });
          } else {
            this.$axios
              .post(
                this.$api.dataConnection.dataDictionary.editDictionary,
                this.dialogForm
              )
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success(res.data.message || "操作成功");
                  this.dialogVisible = false;
                  this.$emit("reload");
                } else {
                  this.$message.warning(res.data.message);
                }
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped></style>
